<template>
  <div>
      <el-container>
        <el-header>
            <div class="topbox">
                <div :class="isCollapse?'logo_active':'logo'">
                    <img src="../assets/logo.png" alt="">
                </div>
                <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
                  <el-radio-button  v-show="this.isCollapse" :label="false">展开</el-radio-button>
                  <el-radio-button  v-show="!this.isCollapse"  :label="true">收起</el-radio-button>
                </el-radio-group>
                <div class="topleft">
                    <el-popover
                    placement="top-start"
                    trigger="hover"
                    class="popover"
                    width="150">
                    <el-button slot="reference">{{text}}</el-button>
                    <template style="width:100px;height:50px">
                        <p class="select">设置</p>
                        <p>个人中心</p>
                        <p @click="clear" class="out">退出</p>
                    </template>
                  </el-popover>
                </div>
            </div>
        </el-header>
        <el-container>
            <el-aside :width="isCollapse?'70px':'200px'">
                 <el-menu
                    default-active="/about/tab"
                    class="el-menu-vertical-demo"
                    text-color="#fff"
                    background-color="#334157"
                    style="width:100%;height:100%;border:none"
                    @select="changeIndex"
                    @open="handleOpen" @close="handleClose" :collapse="isCollapse"
                    active-text-color="orange">
                    <el-submenu index="1">
                        <template slot="title">
                           <i class="el-icon-setting"></i>
                            <span slot="title">基础管理</span>
                        </template>
                        <el-menu-item index="/">
                            <template slot="title">
                                <i class="el-icon-smoking"></i>
                                <span>商品管理</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                           <i class="el-icon-setting"></i>
                            <span slot="title">订单管理</span>
                        </template>
                        <el-menu-item index="/about/about21">
                            <template slot="title">
                                <i class="el-icon-smoking"></i>
                                <span>交易订单</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                           <i class="el-icon-setting"></i>
                            <span slot="title">系统管理</span>
                        </template>
                        <el-menu-item index="/about/about31">
                            <template slot="title">
                                <i class="el-icon-smoking"></i>
                                <span>用户管理</span>
                            </template>
                        </el-menu-item>
                        <el-menu-item index="/about/about32">
                            <template slot="title">
                                <i class="el-icon-smoking"></i>
                                <span>菜单管理</span>
                            </template>
                        </el-menu-item>
                        <el-menu-item index="/about/about33">
                            <template slot="title">
                                <i class="el-icon-smoking"></i>
                                <span>角色管理</span>
                            </template>
                        </el-menu-item>
                        <el-menu-item index="/about/about34">
                            <template slot="title">
                                <i class="el-icon-smoking"></i>
                                <span>公司管理</span>
                            </template>
                        </el-menu-item>
                        <el-menu-item index="/about/about35">
                            <template slot="title">
                                <i class="el-icon-smoking"></i>
                                <span>系统环境管理</span>
                            </template>
                        </el-menu-item>
                        <el-menu-item index="/about/about36">
                            <template slot="title">
                                <i class="el-icon-smoking"></i>
                                <span>权限管理</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">
                           <i class="el-icon-setting"></i>
                            <span slot="title">支付管理</span>
                        </template>
                        <el-menu-item index="/about/about41">
                            <template slot="title">
                                <i class="el-icon-smoking"></i>
                                <span>支付配置信息</span>
                            </template>
                        </el-menu-item>
                        <el-menu-item index="/about/about42">
                            <template slot="title">
                                <i class="el-icon-smoking"></i>
                                <span>支付配置</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
                <router-view></router-view>
        </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
    data() {
        return {
            text: '超级管理员',
            isCollapse: true
        }
    },
 methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      changeIndex(index) {
        //   console.log(index)
          this.$router.push(index)
      },
      clear() {
          this.$router.push('/load')
          localStorage.removeItem('token')
      },
       handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
}
</script>

<style>
.topbox {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
}
.logo {
    width: 14.4%;
    height: 100%;
    background-color:#334157;
    color: #fff;
    font-size: 22px;
    text-align: center;
    line-height: 250%;
}
.logo_active {
    width: 5%;
    height: 100%;
    background-color:#334157;
    color: #fff;
    font-size: 22px;
    text-align: center;
    line-height: 250%;
}
.topleft {
    position: absolute;
    right: 50px;
    line-height: 60px;
}
.select, .out {
    width: 100%;
    cursor: pointer;
}
.select:hover {
    color: #89C2B5;
    background-color: #334157;
}
.out:hover {
    color: #89C2B5;
    background-color: #334157;
}
.el-menu-demo {
  background-color: #334157;
}
  .el-header, .el-footer {
    color: #eee;
    height: 10vh;
    padding: 0;
    background-color: #334157;
  }
  
  .el-aside {
    background-color: #334157;
    color: #eee;
    height: 90vh;
  }
  
  .el-main {
    color: #eee;
    height: 90vh;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>